<template>
  <div class="prod-wrap" :style="{ maxHeight }">
    <div class="prod-item" v-for="e in arr" :key="e.key">
      <el-select
        filterable
        v-model="e.id"
        placeholder="请选择"
        style="width: 240px"
      >
        <el-option
          v-for="item in listOpts"
          :disabled="item.disabled"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="norms">{{ e.norms }}</div>
      <el-input-number
        style="margin: 0 20px"
        :max="e.max || 100000"
        v-model="e.count"
        :min="0"
      ></el-input-number>
      <span
        class="el-icon-delete"
        v-if="arr.length > 1 && !outStatus"
        style="cursor: pointer"
        @click="remove(e)"
      ></span>
     <div class="norms"  :style="{ color: e.inventoryNum < e.count ? 'red' : '#333' }">实时库存：{{ e.inventoryNum }} <span v-if="e.inventoryNum < e.count">(缺货)</span></div>
    </div>
<!--    <el-drawer-->
<!--      :visible.sync="drawer"-->
<!--      :modal="false"-->
<!--      size="400px"-->
<!--      :with-header="false">-->
<!--      <div style="margin-left: 20px">-->
<!--        <span style="color: tomato;display: block" v-for="item in attention">{{item}}</span><span style="color: unset">数量大于当前库存</span>-->
<!--      </div>-->

<!--    </el-drawer>-->
  </div>
</template>

<script>
export default {
  model: {
    prop: "arr",
    event: "change",
  },
  props: {
    arr: {
      type: Array,
      default: () => [{ id: "", count: 0, key: this.$quinn.guid() }],
    },
    api: {
      type: String,
      default: "getMaterial", // "newOrderOutMaterials"
    },
    params: {
      type: Object,
      default: () => ({ pageSize: 100000, pageNumber: 1 }),
    },
    maxHeight: {
      type: String,
      default: "45vh",
    },
  },
  data() {
    return {
      list: [],
      drawer: false,
      outStatus: false,
      attention: [],
    };
  },
  beforeDestroy() {
    this.outStatus = false;
  },
  computed: {
    listOpts() {
      const ids = this.arr.filter((e) => e.id).map((e) => e.id);
      const res = this.list
        .map((e) => {
          e.disabled = ids.includes(e.value);
          return e;
        })
        .sort((a, b) => {
          a = a.disabled ? 1 : 0;
          b = b.disabled ? 1 : 0;
          return a - b;
        });

      return res;
      filter(e => !ids.includes(e.value))
    }
  },
  watch: {},
  mounted() {
    this.getList();
  },
  methods: {
    add() {
      if (this.listOpts.length <= 0)
        return this.$message.info("暂无更多产品选择");
      let arr = JSON.parse(JSON.stringify(this.arr));
      arr.push({ id: "", count: 0, key: this.$quinn.guid() });
      this.$emit("change", arr);
      // this.arr = arr
    },
    remove(e) {
      let arr = JSON.parse(JSON.stringify(this.arr));
      arr = arr.filter((item) => item.key != e.key);
      this.$emit("change", arr);
      // this.arr = arr
    },
    getList() {
      this.$api[this.api](this.params).then((res) => {
        const arr = [];
        this.list = (res?.data || res || []).map((e) => {
          // if (e.count > e.inventoryNum) {
          //   this.drawer = true
          //   this.attention.push(e.productName)
          // }
          arr.push({
            id: `${e.id}`,
            norms: e.norms,
            inventoryNum: e.inventoryNum,
            count: e.count || 0,
            max: e.count || 10000,
            productCode: e.productCode,
            key: this.$quinn.guid(),
          });
          return {
            // label: `${e.productName} ${e.colour} ${e.norms}`,
            label: `${e.productName} ${e.productCode}`,
            value: `${e.id}`,
          };
        });
        if (this.api == "newOrderOutMaterials")
          this.outStatus = true;
        setTimeout(() => {
          this.$emit("change", arr);
        }, 1);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.prod-wrap {
  overflow-y: auto;
}

.prod-item {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .norms {
    min-width: 100px;
    padding-left: 20px;
  }
}
</style>
